import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    ScrollView,
    Platform,
    Dimensions
} from 'react-native';

var screenWidth = Dimensions.get('window').width; //屏宽

var screenHeight = Dimensions.get('window').height; //屏宽

var NavigatorBar = require('../Main/NXNavigationBar'); //NavigationBar

var SatteView = require('../Mine/NXMine')
var MineTopView = require('../Mine/NXMineTopView');
var MineMiddkeView = require('../Mine/NXMinemiddleView');
var MineBottomView = require('../Mine/NXMineBottomView');


var CommentsView = require('../Mine/NXMineCommentsView');
var UploadView = require('../Mine/NXMineUploadView');
var CollectView = require('../Mine/NXMineCollectView');

var DetailsView = require('../Mine/NXDetailsView')

var Mine = React.createClass({
    getInitialState(){
        return{
            selectItem:0
        }
    },
    render() {
        return (
            <ScrollView
                style={styles.scrollViewStyle}

            >
                {/*顶部的View*/}
                <MineTopView />
                {/*中间的view*/}
                <View style={styles.textView}>
                    <View style={{flexDirection:'row'}}><Text onPress={()=>this.stateAction()}  style={[styles.textStyle,{color:this.state.selectItem == 0?'red':'black'}]}>品味</Text></View>
                    <View style={{flexDirection:'row'}}><Text onPress={()=>this.commentsAction()}  style={[styles.textStyle,{color:this.state.selectItem == 1?'red':'black'}]}>点评</Text></View>
                    <View style={{flexDirection:'row'}}><Text onPress={()=>this.uploadAction()}  style={[styles.textStyle,{color:this.state.selectItem == 2?'red':'black'}]}>上传</Text></View>
                    <View style={{flexDirection:'row'}}><Text onPress={()=>this.collectAction()}  style={[styles.textStyle,{color:this.state.selectItem == 3?'red':'black'}]}>收藏</Text></View>
                </View>
                {/*<MineMiddkeView stateProps={()=>this.stateAction()} commentsProps={()=>this.commentsAction()} uploadPress={()=>this.uploadAction()} collectPress={()=>this.collectAction()} />*/}
                {/*下方的View*/}
                <ScrollView
                    ref='fourScrollView'
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                    pagingEnabled={true}
                    bounces={false}
                    onMomentumScrollEnd={(e)=>this.momentumScroll(e)}
                >
                    {this.renderChildView()}
                </ScrollView>

            </ScrollView>

        );
    },
    leftAction(){
        alert('左');
        alert('左');
    },
    rightAction(){

    },
    momentumScroll(e){
  //      console.log(e.nativeEvent.contentOffset.x)

 //       console.log(e.nativeEvent.contentOffset.x)



        var offSetX = e.nativeEvent.contentOffset.x
        if(offSetX == 0){
            this.setState({
                selectItem:0
            })
        }else if(offSetX == screenWidth){
            this.setState({
                selectItem:1
            })
        }else if(offSetX == screenWidth*2){
            this.setState({
                selectItem:2
            })
        }else{
            this.setState({
                selectItem:3
            })
        }
    },
    //滑到品味
    stateAction(){
        this.setState({
            selectItem:0
        })
        var fourScrollView = this.refs.fourScrollView;
        fourScrollView.scrollTo({
            x:0,
            y:0
        })
    },
    //滑到点评
    commentsAction(){
        this.setState({
            selectItem:1
        })
        var fourScrollView = this.refs.fourScrollView;
        fourScrollView.scrollTo({
            x:screenWidth,
            y:0
        })
    },
    //滑道上传
    uploadAction(){
        this.setState({
            selectItem:2
        })
        var fourScrollView = this.refs.fourScrollView;
        fourScrollView.scrollTo({
            x:screenWidth*2,
            y:0
        })
    },
    //滑道收藏
    collectAction(){
        this.setState({
            selectItem:3
        })
        var fourScrollView = this.refs.fourScrollView;
        fourScrollView.scrollTo({
            x:screenWidth*3,
            y:0
        })
    },
    renderChildView(){
        //数组
        var allChild = [];
        allChild.push(  //装载
            <MineBottomView key="0"/>
        );
        allChild.push(  //装载
            <CommentsView key="1" selectCellAction = {(rowData)=>this.commentsCellSelectedAction(rowData)}/>
        );
        allChild.push(  //装载
            <UploadView key="2" selectCellAction = {(rowData)=>this.uploadCellSelectedAction(rowData)}/>
        );
        allChild.push(  //装载
            <CollectView key="3" selectCellAction = {(rowData)=>this.collectCellSelectedAction(rowData)} />
        );
        //返回
        return allChild;
    },
    uploadCellSelectedAction(rowData){
        this.props.navigator.push(
            {
                component:DetailsView,
                passProps:{
                    'product_id':rowData.productId,
                    'uploadImgId':rowData.userUploadId
                }
            }
        );

    },
    collectCellSelectedAction(rowData){
        this.props.navigator.push(
            {
                component:DetailsView,
                passProps:{
                    'product_id':rowData.productId,
                    'uploadImgId':rowData.uploadImageId
                }
            }
        );
    },
    commentsCellSelectedAction(rowData){
        this.props.navigator.push(
            {
                component:DetailsView,
                passProps:{
                    'product_id':rowData.product_id,
                    'uploadImgId':rowData.uploadImgId
                }
            }
        );
    }

});


var styles = StyleSheet.create({
    scrollViewStyle: {
        // flex:1,
        backgroundColor: 'rgba(200,200,200,1.0)',
    },
    textStyle:{
        fontSize:18
    },
    textView:{
        height:30,
        backgroundColor: 'white',
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center',
        borderBottomWidth:0.5,
        borderBottomColor:'black'
    }

});

module.exports = Mine;